<template>
	<view>

		<view class="title"
			style="background-image: url('https://vkceyugu.cdn.bspapp.com/VKCEYUGU-9ba4bae2-2ece-48da-8321-61b4873a74bb/1d54bc98-1877-4155-8c71-3776e9b17755.jpg'); background-size: 100% 400%;">

			<image :src="basicInfo.avatar" mode="aspectFill" @click="addPhone()"></image>
			<view class="name">{{basicInfo.username}}</view>
			<view class="work">
				<view class="iconfont icon-gangwei" style="font-size: 40rpx;"></view>
				<view>{{basicInfo.position}}</view>
			</view>


			<view class="position">
				<view class="left">
					<view class="iconfont icon-gongzuojingyan" style="font-size: 32rpx;"></view>
					<view>{{basicInfo.workex}}年工作经验</view>

				</view>
				<view class="right">
					<view class="iconfont icon-dianhua"></view>
					<view class="tel" @click="callTel()">{{basicInfo.tel}}</view>
				</view>
			</view>

			<view class="position">
				<view class="left">
					<view class="iconfont icon-diqu"></view>
					<view class="test">{{basicInfo.region}}</view>
				</view>
				<view class="right">
					<view class="iconfont icon-a-youxiang1" style="font-size: 34rpx;"></view>
					<view class="tel" @click="copyEmail()">{{basicInfo.email}}</view>
				</view>
			</view>

			<view class="position">
				<view class="left">
					<view class="iconfont icon-xingbie2"></view>
					<view>{{basicInfo.sex}}</view>
				</view>
				<view class="right" v-show="basicInfo.blog" @click="copyBlog">
					<view v-show="basicInfo.blog" class="iconfont icon-boke1"></view>
					<view class="tel">{{basicInfo.blog}}</view>
				</view>
			</view>
		</view>

		<view class="eduExperience">
			<view class="top">
				<view class="iconfont icon-xueli titleicon"></view>
				<view class="top-word">教育背景</view>
			</view>

			<view class="edu-item">
				<view class="iconfont icon-a-shijian"></view>
				<view>{{edu.time}}</view>
			</view>

			<view class="edu-item">
				<view class="iconfont icon-xuexiao"></view>
				<view>{{edu.school}}</view>
			</view>

			<view class="edu-item">
				<view class="iconfont icon-zhuanye" style="font-size: 32rpx;"></view>
				<view>{{edu.major}}</view>
			</view>
		</view>

		<view class="eduExperience">
			<view class="top">
				<view class="iconfont icon-zhuanye1 titleicon" style="font-size: 52rpx;"></view>
				<view class="top-word">专业技能</view>

			</view>
			<view class="marjor">
				<view v-for="item,index in majorList" :key="index">
					<view style="font-weight: bold;color: #2b90d9;">{{item.title}}</view>
					<view v-for="item2,index in item.list" :key="index">
						<text style="font-weight: bold;margin-right: 10rpx;">{{index+1}}.</text>{{item2}}
					</view>
				</view>
				<view class="bottom-icon">
					<view class="iconfont icon-html"></view>
					<view class="iconfont icon-css" style="font-size: 50rpx;"></view>
					<view class="iconfont icon-javascript1"></view>
				</view>

				<view class="bottom-icon">
					<view class="iconfont icon-Vue"></view>
					<view class="iconfont icon-vant"></view>
					<view class="iconfont icon-Element" style="font-size: 56rpx;"></view>
					<view class="iconfont icon-bootstrap"></view>
				</view>

				<view class="bottom-icon">
					<view class="iconfont icon-node" style="font-size: 60rpx;"></view>
					<view class="iconfont icon-axurelogo" style="font-size: 38rpx;"></view>
					<!-- <view class="iconfont icon-less1" style="font-size: 52rpx;"></view> -->
					<view class="iconfont icon-less" style="font-size: 56rpx;"></view>
					<view class="iconfont icon-uni-app"></view>
				</view>

				<view class="bottom-icon">
					<view class="iconfont icon-MySQL"></view>
					<view class="iconfont icon-MongoDB" style="font-size: 38rpx;"></view>
					<view class="iconfont icon-Ioniconslogopython" style="font-size: 52rpx;"></view>
					<view class="iconfont icon-git" style="font-size: 52rpx;"></view>
				</view>
			</view>


		</view>
		<view class="eduExperience">
			<view class="top">
				<view class="iconfont icon-ziwopingjiabeifen titleicon"></view>
				<view class="top-word">自我评价</view>
			</view>
     <view class="introduce">具备良好的团队协作精神和沟通能力，对前端有持续追求新技术的热情，也喜欢巩固本身不足的基础知识。善于总结、乐于分享，在用户体验、交互开发方面有自己的见解，同时也能够较好地完成领导分配的任务。平时喜欢在码云、GitHub找一些有意思的开源项目学习，看掘金等技术社区，也喜欢收藏具有创意的个人博客。</view>
	 <view class="introduce"></view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				basicInfo: {
				
				},
				edu: {
					school: "广州大学华软软件学院",
					time: "2018.09——2022.06",
					major: "软件工程专业"
				},
				majorList: [{
						"title": "前端方向",
						list: [
							"熟悉掌握HTML、CSS、JavaScript等前端技术，能够根据原型图进行页面开发。",
							"熟悉使用JQuery库、Echarts、Bootstrap框架进行网页适应性优化。",
							"熟悉使用Vue、Vant、Element、UView等前端框架进行网页开发。",
							"了解并使用过Uni-App+UniCloud云开发进行小程序、H5开发。",
							"熟悉Node.js的使用，并能使用其开发后台管理系统。",
							"了解less、scss等预编译样式处理。"
						]
					},
					{
						"title": "后端方向",
						list: [
							"熟悉Mysql，MongoDB数据库开发技术",
							"熟练使用Git进行版本管理",
							"有一定的Java、Python基础"
						]
					}
				]
			}
		},
		methods: {
			onLoad(){
				uniCloud.callFunction({
					name: "test",
					data: {
				
					},
					success: (res) => {
						// this.loding = false
						// console.log(res.result.data[0]);
						this.basicInfo = res.result.data[0]
					},
					fail: (err) => {
						console.log(err);
					}
				
				});
			},
			callTel() {
				uni.makePhoneCall({
						phoneNumber: this.basicInfo.tel,
						success: () => {
							console.log("拨打成功");
						}
					}),
					uni.setClipboardData({
						data: this.basicInfo.tel,
						success: () => {
							console.log(this.basicInfo.tel);
						}
					})
			},
			share(){
				console.log("分享");
		uni.share({
		    provider: "weixin",
		    scene: "WXSenceTimeline",
		    type: 1,
		    summary: "我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！",
		    success: function (res) {
		        console.log("success:" + JSON.stringify(res));
		    },
		    fail: function (err) {
		        console.log("fail:" + JSON.stringify(err));
		    }
		});
			},
			// ccc(){

			// 	this.majorList.push({
			// 		"title":"周志贤",
			// 		list:[
			// 			21,22
			// 		]
			// 	})
			// 	console.log(this.majorList);
			// },
			copyEmail() {
				uni.setClipboardData({
					data: this.basicInfo.email,
					success: () => {
						console.log(this.basicInfo.email);
					}
				})
			},
			copyBlog() {
				uni.setClipboardData({
					data: this.basicInfo.blog,
					success: () => {
						console.log(this.basicInfo.blog);
					}
				})
			},

			copyWechat() {
				uni.setClipboardData({
					data: this.basicInfo.wechat,
					success: () => {
						console.log(this.basicInfo.wechat);
					}
				})
			},

			addPhone() {
				uni.addPhoneContact({
					firstName: this.basicInfo.name,
					remark: `${this.basicInfo.name},毕业于${this.edu.school},有${this.basicInfo.work}年工作经验,应聘${this.basicInfo.position}岗位`,
					mobilePhoneNumber: this.basicInfo.tel,
					weChatNumber: this.basicInfo.wechat,
					success: function() {
						console.log('success');
					},
					fail: function() {
						console.log('fail');
					}
				});
			}

		}
	}
</script>

<style lang="scss">
	// page{
	// 	background-color: #93d7ef;
	// }
	.iconfont {
		font-family: "iconfont" !important;
		font-size: 34rpx;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		color: $color-2;
	}

	.title {
		background-color: $uni-bg-color;
		color: #004187;
		width: 90%;
		margin: 5%;
		padding: 30rpx 0;
		box-shadow: 0 6px 21px rgba(0, 0, 0, 0.2);
		border-radius: 9px;
		display: flex;
		letter-spacing: 2rpx;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 27rpx;
		align-content: center;
	}

	.eduExperience {
		background-color: $uni-bg-color;
		color: $color-2;
		width: 90%;
		margin: 5%;
		// background-image: url('https://products.ls.graphics/mesh-gradients/images/78.-Night-sky.jpg');
		// background-size: 100% 400%;
		padding: 30rpx 0;
		box-shadow: 0 6px 21px rgba(0, 0, 0, 0.2);
		border-radius: 9px;
		display: flex;
		font-size: 26rpx;
		flex-direction: column;
		letter-spacing: 2rpx;
	}

	.eduExperience .top {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.top-word {
		font-size: 26rpx;
		font-weight: bolder;
	}

	.eduExperience>view {
		margin: 12rpx 0;
	}

	.edu-item {
		font-size: 26rpx;
		display: flex;
		justify-content: flex-start;
		padding-left: 80rpx;
	}

	.edu-item>view {
		margin: 0 10rpx;
	}

	.titleicon {
		font-size: 50rpx;
		color: #004187;
	}

	.name {
		font-size: 50rpx;
	}

	.tel {
		letter-spacing: 0rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.test {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.test:hover {
		overflow: visible;
		width: auto;
	}

	.work {
		display: flex;
		margin: 20rpx 0;
		font-size: 30rpx;
	}

	.marjor {
		padding: 0 30rpx 0 80rpx;
		line-height: 40rpx;
	}

	.marjor>view {
		margin: 30rpx 0;
		font-size: 28rpx;

	}
	
	.introduce{
	padding: 0 40rpx 0 80rpx;
	line-height: 40rpx;
	font-size: 26rpx;
	}

	.marjor>view>view {
		margin: 10rpx 0;
		font-size: 26rpx;
	}

	.icon-gangwei {
		margin-right: 20rpx;
	}

	.icon-dianhua {
		font-size: 38rpx;
	}

	.position {
		display: flex;
		justify-content: flex-start;
		align-self: flex-start;
	}

	.position>view {
		display: flex;
		margin: 20rpx 0;
	}

	.left {
		width: 42vw;
		padding-left: 10vw;
	}

	.right {
		width: 48vw;
	}

	.bottom-icon {
		display: flex;
		justify-content: center;
		padding-right:50rpx ;
	}
	.bottom-icon .iconfont{
		margin: 0 50rpx;
		font-size: 40rpx;
		color: $color-4;
	}


	.left>view {
		margin-right: 8rpx;
	}

	.right>view {
		margin-right: 8rpx;
	}

	image {
		width: 140rpx;
		height: 140rpx;
		border-radius: 50%;
		margin: 20rpx 0;
	}
</style>
